<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>前端知识</title>
		<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
		<link href="../css/index.css" rel="stylesheet">
		<link href="../css/animation.css" rel="stylesheet">
		<link href="../css/page.css" rel="stylesheet">

		<script src="../js/jquery-1.11.3.js"></script>
		<script src="../bootstrap/js/bootstrap.min.js"></script>
		<script src="../js/index.js"></script>
	</head>

	<body>
		<!--导航栏部分-->
		<nav class="navbar navbar-default navbar-inverse">
			<div class="container-fluid">

				<div class="navbar-header">

					<a class="navbar-brand" href="index.html">首页</a>
				</div>

				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li>
							<a href="#">前端知识</a>
						</li>
						<li>
							<a href="#">博客经验</a>
						</li>
						<li>
							<a href="#">时间轴</a>
						</li>
						<li>
							<a href="#">关于我</a>
						</li>
						<li>
							<a href="#">给我留言</a>
						</li>
					</ul>
				</div>
			</div>
		</nav>

		<!--第二部分-->
		<div id="mainbody">
			<div class="blogs">
				<div id="index_view">
					<h2 class="t_nav"><a href="index.html">首页</a><a href="page.html">前端知识</a></h2>
					<h1 class="c_titile">前端入门</h1>
					<p class="box">发布时间2019-12-25<span>整理人 傅六夏</span></p>
					<ul>
						<p>HTML: 内容层---表示某个标签在页面中是什么角色 CSS: 样式层---表示某个标签在页面中该呈现什么样式 JavaScript: 行为层---页面与用户的交互行为。通俗的讲：Html 只负责文档的语义和结构，它描述了网页的内容和结构。 内容的呈现则由应用于元素上的 CSS 样式控制，它描述了网页的表现与展示效果。 JavaScript 则是负责网页的功能与行为，如与用户的交互。

						</p>
						
						<p> Html 是一种标记语言，不是编程语言，需要明确这点。 编程语言，通俗的理解就是向计算机发送指令，通过程序让计算机达到我们想要的功能。 而标记语言，可以通俗的理解成对文本增加一些标志信息，类似于批注信息来说明文本内容 更通俗点理解，一大段文本内容，毫无重点，毫无结构，让人不好理解。所以，Html 就通过大伙约定俗成的规范，利用一些标签，来指明，这一段文本是标题，这一段文本是个表格，
							这一段文本是个列表，这一段文本是导航菜单，这里需要分段，这里需要分行，这几个词是关键词，需要重点标记一下，等等等等。 Html 可以这么通俗的理解。那么这个大伙约定俗成的规范，其实也就是由 W3C 来作为官方发布的标准规范。 定了规范，自然是想要让人遵守才有意义。所以，在这里，W3C 所定义的标准规范，遵守方其实也就是各大浏览器。不同的浏览器厂商，根据 W3C 发布的标准规范来解析每一份 HTML 文档，那么相同的 HTML 
							文档在不同的浏览器上才会有相同的作用。 而一旦某些浏览器厂商没有遵守这些规范，那么前端开发人员就要为此做一些兼容适配工作，这就跟 Android 系统由 Google 开发并开源一样的道理，手机厂商都可以使用这开源的系统，但不同厂商都喜欢做一些自己的修改，这就导致了 Android 开发人员经常需要面对的适配工作问题。

						</p>
					<p>标签： 带有这种符号的称为标签，跟 Android 中的标签一样，分开始标签，结束标签 内容：文本内容，上图中的点击跳转四字 属性：跟 Android 中的 xml 里的标签一样，每个标签有自己的一些属性，另外，Html 有一些全局属性，比如上述的 class，这个属性所有标签都可以用。 元素：标签 + 内容
						</p>
						<p>CSS 负责文本样式的呈现，既然将 HTML 和 CSS 分离开，各自只负责各自的职责，那么肯定需要某种方式将两者连接在一起。 更准确的说，是在 HTML 文档中该如何使用 CSS，因为 HTML 文档是互联网的基础，一个个网页就是一份份HTML 文档，既然 HTML 文档是基础，那么就是要明确在 HTML 文档中该如何使用 CSS。 总共有三种方式：全局属性 style，style 标签，link 标签 CSS 最终作用的对象其实就是 HTML 文档中的每个元素

						</p>
						<p>全局属性 style：style 是所有标签都具有的属性，称之为全局属性。 剩余两种方式，都是集中将所有的 CSS 样式管理存放，因此如果需要作用到具体元素上，要借助选择器来实现，选择器后面再说，先看这两种方式的使用：style 标签内嵌方式，link 标签引用外部文件方式</p>
						<p> 选择器 选择器是专门用来将 css 代码关联到指定的 HTML 文档中的元素对象上的，毕竟 css 已经被抽离出 HTML，各自负责各自的职责，但总归需要一种桥梁将两者关联在一起。 选择器很多，规则也很多，足够覆盖各种各样的场景

						</p>
						<p>基础-JavaScript Js 是脚本语言，可用于增加网页的交互功能，及各种行为功能。 既然是一门语言，那么学习这么脚本语言自然需要先掌握其语法，以及运行方式。 浏览器解析 HTML 文档是按顺序解析的，也就是说，当遇到脚本语言时，也会按顺序一条条的解释执行，直至将脚本语言执行结束再继续解析文档。这就解释了，为什么一份 HTML 文档里， 标签经常是在各种各样的位置出现的。

						</p>
					</ul>
					
				</div>
				
				<aside>
					<div class="search">
						<form class="searchform" method="get" action="#">
							<input type="text" name="s" value="Search" onfocus="this.value=''" onblur="this.value='Search'">
						</form>
					</div>
					<div class="sunnav">
						<ul>
							<li>
								<a href="#" target="_blank" title="前端知识">前端知识</a>
							</li>
							<li>
								<a href="#" target="_blank" title="博客经验">资源分享</a>
							</li>
							<li>
								<a href="#" target="_blank" title="时间轴">时间轴</a>
							</li>
							<li>
								<a href="#" target="_blank" title="给我留言">给我留言</a>
							</li>
						</ul>
					</div>
					<div class="tuijian">
						<h2>推荐的网站</h2>
						<ol>
							<li><span><strong>1</strong></span>
								<a href="http://www.qianduandaxue.com/">前端网</a>
							</li>
							
							<li><span><strong>2</strong></span>
								<a href="https://daneden.github.io/animate.css/">css动画</a>
							</li>
							<li><span><strong>3</strong></span>
								<a href="https://www.shiyanlou.com/">学习网站</a>
							</li>
							<li><span><strong>4</strong></span>
								<a href="https://www.w3school.com.cn/js/js_intro.asp">学习js的网站</a>
							</li>
							<li><span><strong>5</strong></span>
								<a href="https://code.ziqiangxuetang.com/">自强学堂</a>
							</li>
							<li><span><strong>6</strong></span>
								<a href="https://www.pexels.com/">高质量的图片</a>
							</li>
							
							<li><span><strong>7</strong></span>
								<a href="http://baijiahao.baidu.com/s?id=1587722571899603255&wfr=spider&for=pc">必备的动画插件</a>
							</li>
							<li><span><strong>8</strong></span>
								<a href="https://www.liaoxuefeng.com/">廖雪峰老师网站</a>
							</li>
							<li><span><strong>9</strong></span>
								<a href="https://developer.mozilla.org/zh-CN/">MDN web 文档</a>
							</li>
							
						</ol>
					</div>
					<div class="toppic">
						<h2>推荐的博客</h2>
						<ul>
							<li>
								<a href="www.36kr.com"><img src="../img/index7.jpg">36氪博客

								</a>
							</li>
							<li>
								<a href="www.alibuybuy.com"><img src="../img/index6.jpg">互联网那点事

								</a>
							</li>
							<li>
								<a href="www.showeb20.com"><img src="../img/index5.jpg">分享网络2.0

								</a>
							</li>
						</ul>
					</div>
					<div class="clicks">
						<h2>互联网热门点击</h2>
						<ol>
							<li>
								<span>
									<a href="https://news.qudong.com/article/444975.shtml">短视频应用人气飙升
									</a>
								</span>

								<li><span><a href="https://www.sohu.com/a/256634049_99976729">AI（人工智能）</a></span>

								</li>
								<li><span><a href="https://blog.csdn.net/FL63Zv9Zou86950w/article/details/95414499">5G承载</a></span>

								</li>
								<li><span><a href="http://tech.163.com/special/S1522052179358/">上市潮</a></span>

								</li>
								<li><span><a href="http://www.cww.net.cn/article?id=413519">共享单车命运多舛</a></span>

								</li>
								<li><span><a href="https://tech.sina.com.cn/roll/2019-12-18/doc-iihnzhfz6805996.shtml">比特币大跌</a></span>

								</li>
								<li><span><a href="https://baijiahao.baidu.com/s?id=1610920322626305003&wfr=spider&for=pc">生物识别技术</a></span>

								</li>
								<li><span><a href="https://baike.baidu.com/item/%E8%B0%B7%E6%AD%8C%E6%97%A0%E4%BA%BA%E9%A9%BE%E9%A9%B6%E6%B1%BD%E8%BD%A6/8435223?fr=aladdin">无人汽车</a></span>

								</li>
						</ol>
					</div>
				</aside>
			</div>
		</div>

		<!--footer-->
		<footer>
			<div class="footer-mid">
				<div class="links">
					<h2>友情链接</h2>
					<ul>
						<li>
							<a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=baidu&wd=%E8%8F%9C%E9%B8%9F&oq=%25E7%2599%25BE%25E5%25BA%25A6&rsv_pq=857610d100074ef1&rsv_t=1e3fuZBq3EgM80agv0uNDFG3FapV2cGg9XDBUxsje8wgs%2BhIphPAf8Ypy2w&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_sug3=8&rsv_sug1=8&rsv_sug7=100&rsv_sug2=0&inputT=2205&rsv_sug4=2205">菜鸟教程</a>
						</li>
						<li>
							<a href="http://www.baidu.com">百度</a>
						</li>
					</ul>
				</div>
				<div class="visitors">
					<h2>个人分享</h2>
					<dl>
						<dt><img src="../img/01.jpg">
        <dt>
        <dd>傅六夏
         
        </dd>
        <dd> <a href="http://www.yangqq.com/jstt/bj/2013-07-28/530.html" class="title">如果要学习web前端开发，需要学习什么？ </a></dd>
  
      </dl>
      <dl>
        <dt><img src="../img/02.jpg">
        <dt>
        <dd>天啊鲁
        
        </dd>
        <dd> <a href="https://www.baidu.com/s?ie=UTF-8&wd=%E7%9F%A5%E4%B9%8E" class="title">知乎大神</a></dd>
       
      </dl>
      <dl>
        <dt><img src="../img/03.jpg">
        <dt>
        <dd>stionngb
         
        </dd>
        <dd> <a href="https://www.nowcoder.com/" class="title">牛客网，一个可以学习的网站 </a></dd>
        <dd></dd>
      </dl>
    </div>
    <section class="flickr">
      <h2>摄影作品</h2>
      <ul>
        <li><a href="/"><img src="../img/1.jpg"></a></li>
        <li><a href="/"><img src="../img/2.jpg"></a></li>
        <li><a href="/"><img src="../img/3.jpg"></a></li>
        <li><a href="/"><img src="../img/4.jpg"></a></li>
        <li><a href="/"><img src="../img/4.jpg"></a></li>
        <li><a href="/"><img src="../img/6.jpg"></a></li>
        <li><a href="/"><img src="../img/7.jpg"></a></li>
        <li><a href="/"><img src="../img/8.jpg"></a></li>
        <li><a href="/"><img src="../img/9.jpg"></a></li>
      </ul>
    </section>
  </div>
 </footer>

<div id="tbox"> <a id="togbook" href="/e/tool/gbook/?bid=1"></a> <a id="gotop" href="javascript:void(0)"></a> </div>

		

		


</body>
</html>